<template>
  <div class="wrap header">
    <div class="div">
      <h1 class="l">
        <img src="/images/8.png" alt="" width="233px" height="55px" />
      </h1>
      <div class="middle">
        <span
          @click="searchHandle('goods')"
          :class="type == 'goodSearch' ? 'active-status' : 'common-status'"
          >商品</span
        >
        <span>/</span>
        <span
          @click="searchHandle('shop')"
          :class="type == 'shop' ? 'active-status' : 'common-status'"
          >店铺</span
        >
        <div>
          <input type="text" :placeholder="placeholder" v-model="inputValue" />
          <!-- <span>搜索</span> -->
          <button @click="sarchGoods()">搜索</button>
        </div>
      </div>
      <div class="r" @click="goCart">
        <img src="/images/9.png" alt="" width="16.96px" height="16.55px" />
        <span>购物车</span>
        <span>{{user?count:0}}</span>
      </div>
    </div>
    <!-- <div class="end">
      <span class="goods-tab">商品分类</span>
      <span v-for="(tab, index) in tabList">
        <span
          :class="currentIndex == index ? 'active-tab' : 'common-tab'"
          @click="tabClick(tab, index)"
          >{{ tab.label
          }}<span :class="currentIndex == index ? 'bgc-bottom' : ''"></span
        ></span>
      </span>
      <span :class="!tabActive ? 'active-tab' : 'common-tab'" @click="tabClick('tab1')">首页<span v-show="tabActive" class="bgc-bottom"></span></span>
      <span :class="tabActive ? 'active-tab' : 'common-tab'" @click="tabClick('tab2')">类别一<span v-show="tabActive" class="bgc-bottom"></span></span>
      <span :class="tabActive ? 'active-tab' : 'common-tab'" @click="tabClick('tab3')">类别二<span v-show="tabActive" class="bgc-bottom"></span></span>
      <span :class="tabActive ? 'active-tab' : 'common-tab'" @click="tabClick('tab4')">类别三<span v-show="tabActive" class="bgc-bottom"></span></span>
      <span :class="tabActive ? 'active-tab' : 'common-tab'" @click="tabClick('tab5')">类别四<span v-show="tabActive" class="bgc-bottom"></span></span>
      <span :class="tabActive ? 'active-tab' : 'common-tab'" @click="tabClick('tab6')">类别五<span v-show="tabActive" class="bgc-bottom"></span></span>
    </div> -->
  </div>
</template>

<script>
import { getShoppingcarInfo } from "@/api/mallApi/congLinMall";
import store from "@/store";
import {mapGetters, mapState} from 'vuex';
export default {
  name: "HeGangProjectHeader",

  data() {
    return {
      // tabList: [
      //   {
      //     label: "首页",
      //     name: "tab1",
      //   },
      //   {
      //     label: "类别一",
      //     name: "tab2",
      //   },
      //   {
      //     label: "类别一",
      //     name: "tab3",
      //   },
      //   {
      //     label: "类别一",
      //     name: "tab4",
      //   },
      //   {
      //     label: "类别一",
      //     name: "tab5",
      //   },
      //   {
      //     label: "类别一",
      //     name: "tab6",
      //   },
      // ],
      placeholder: "请输入商品搜索",
      inputValue: "",
      type: "goodSearch",
      shoppingcarCount:0,
      shopCarInfo: {}
      // currentIndex: 0,
    };
  },

  mounted() {},
  created() {
    if (store.state.user.userId) {
      this.tMgdShopcarPageList();
    }
    console.log("store...", store.state.user);
  },

  computed:{
    user(){
      return store.state.user.userId
    },

    ...mapState({
      count: state => {
        return state.test.count
      }
    })
  },

  methods: {
    sarchGoods() {
      this.$bus.$emit("searchGoods", this.inputValue);
      if (this.type == "goodSearch") {
        // this.$bus.$emit('searchGoods',this.inputValue)
        this.$router.push({
          path: "/mall/searchGoods",
          query: {
            searchKey: this.inputValue
          },
        })
      } else {
        this.$bus.$emit("searchShops", this.inputValue);
        this.$router.push({
          path: "/mall/searchShops",
          query: {
            searchKey: this.inputValue
          },
        })
      }
    },
    tMgdShopcarPageList() {
      getShoppingcarInfo().then((res) => {
        console.log("res", res);
        this.shoppingcarCount=res.data.shoppingcarCount
        this.$store.dispatch('test/shopCarCount', this.shoppingcarCount)
        this.shopCarInfo = res.data
      });
    },
    // tabClick(tab, index) {
    //   this.currentIndex = index;
    //   this.$router.push({
    //     name: "searchGoods",
    //     // params,
    //   });
    //   // if (tab.name == 'tab2') {
    //   //   this.$router.push('/shopcart')
    //   // }
    // },
    searchHandle(val) {
      if (val == "shop") {
        this.placeholder = "请输入店铺搜索";
        this.type = "shop";
      } else {
        this.placeholder = "请输入商品搜索";
        this.type = "goodSearch";
      }
    },
    goCart() {
      this.$router.push({
        path: "/mall/shopcart",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// .header .end {
//   height: 47px;
//   background-color: #ffffff;
//   // background-color: aqua;
//   .common-tab {
//     display: inline-block;
//     background-color: red;
//     width: 144px;
//     height: 47px;
//     background-color: #ffffff;
//     line-height: 47px;
//     text-align: center;
//     font-family: "Source Han Sans CN Bold";
//     font-weight: 700;
//     font-size: 18px;
//     color: #2b2b2b;
//     position: relative;
//     cursor: pointer;
//   }
//   .active-tab {
//     display: inline-block;
//     width: 144px;
//     height: 47px;
//     background-color: #ffffff;
//     line-height: 47px;
//     text-align: center;
//     font-family: "Source Han Sans CN Bold";
//     font-weight: 700;
//     font-size: 18px;
//     color: #1289ff;
//     position: relative;
//     cursor: pointer;
//   }
//   .goods-tab {
//     display: inline-block;
//     background-color: #1289ff;
//     width: 230px;
//     height: 47px;
//     line-height: 47px;
//     text-align: center;
//     font-family: "Source Han Sans CN";
//     font-weight: 400;
//     font-size: 20px;
//     color: #fff;
//   }
//   .bgc-bottom {
//     display: inline-block;
//     background-image: url("/images/20.png");
//     background-repeat: no-repeat;
//     width: 20px;
//     height: 5px;
//     position: absolute;
//     bottom: 2px;
//     right: 60px;
//   }
//   // span:nth-child(1) {
//   //   display: inline-block;
//   //   background-color: #1289ff;
//   //   width: 230px;
//   //   height: 47px;
//   //   line-height: 47px;
//   //   text-align: center;
//   //   font-family: "Source Han Sans CN";
//   //   font-weight: 400;
//   //   font-size: 20px;
//   //   color: #fff;
//   // }
//   // span:nth-child(2) {
//   //   display: inline-block;
//   //   width: 144px;
//   //   height: 47px;
//   //   background-color: #ffffff;
//   //   line-height: 47px;
//   //   text-align: center;
//   //   font-family: "Source Han Sans CN Bold";
//   //   font-weight: 700;
//   //   font-size: 18px;
//   //   color: #1289ff;
//   // }
//   // span:nth-child(3) {
//   //   display: inline-block;
//   //   background-color: red;
//   //   width: 144px;
//   //   height: 47px;
//   //   background-color: #ffffff;
//   //   line-height: 47px;
//   //   text-align: center;
//   //   font-family: "Source Han Sans CN Bold";
//   //   font-weight: 700;
//   //   font-size: 18px;
//   //   color: #2b2b2b;
//   // }
//   // span:nth-child(4) {
//   //   display: inline-block;
//   //   background-color: red;
//   //   width: 144px;
//   //   height: 47px;
//   //   background-color: #ffffff;
//   //   line-height: 47px;
//   //   text-align: center;
//   //   font-family: "Source Han Sans CN Bold";
//   //   font-weight: 700;
//   //   font-size: 18px;
//   //   color: #2b2b2b;
//   // }
//   // span:nth-child(5) {
//   //   display: inline-block;
//   //   background-color: red;
//   //   width: 144px;
//   //   height: 47px;
//   //   background-color: #ffffff;
//   //   line-height: 47px;
//   //   text-align: center;
//   //   font-family: "Source Han Sans CN Bold";
//   //   font-weight: 700;
//   //   font-size: 18px;
//   //   color: #2b2b2b;
//   // }
//   // span:nth-child(6) {
//   //   display: inline-block;
//   //   background-color: red;
//   //   width: 144px;
//   //   height: 47px;
//   //   background-color: #ffffff;
//   //   line-height: 47px;
//   //   text-align: center;
//   //   font-family: "Source Han Sans CN Bold";
//   //   font-weight: 700;
//   //   font-size: 18px;
//   //   color: #2b2b2b;
//   // }
//   // span:nth-child(7) {
//   //   display: inline-block;
//   //   background-color: red;
//   //   width: 144px;
//   //   height: 47px;
//   //   background-color: #ffffff;
//   //   line-height: 47px;
//   //   text-align: center;
//   //   font-family: "Source Han Sans CN Bold";
//   //   font-weight: 700;
//   //   font-size: 18px;
//   //   color: #2b2b2b;
//   //   // h3 {
//   //   //   display: inline-block;
//   //   //   background-color: red;
//   //   //   width: 144px;
//   //   //   height: 47px;
//   //   // }
//   // }
// }
.header .div {
  height: 153px;
  background: #fff;
  // background-color: red;
  display: flex;
  justify-content: space-between;
  .active-status {
    font-family: "Source Han Sans CN Bold";
    font-weight: 700;
    font-size: 14px;
    // text-align: left;
    color: #1289ff;
    cursor: pointer;
  }
  .common-status {
    font-family: "Source Han Sans CN";
    font-weight: 400;
    font-size: 14px;
    text-align: left;
    color: #585858;
    cursor: pointer;
  }
  input {
    outline: none;
    width: 643px;
    height: 45px;
    background: #fff;
    border: 1.5px solid #3f87f7;
    font-family: "Source Han Sans CN";
    font-weight: 400;
    font-size: 14px;
    text-align: start;
    color: #a0a0a0;
    padding-left: 20px;
  }
  .middle button {
    width: 111px;
    height: 45px;
    background: #1289ff;
    font-family: "Source Han Sans CN";
    font-weight: 400;
    font-size: 16px;
    text-align: center;
    color: #fff;
    border-color: #1289ff;
    cursor: pointer;
  }
  .r {
    margin-top: 47px;
    width: 140px;
    height: 45px;
    border-radius: 4px;
    background: #fcfcfc;
    border: 1px solid #d3d3d3;
    display: flex;
    justify-content: space-around;
    align-items: center;
    cursor: pointer;
  }
  .l {
    margin-top: 37px;

    height: 58px;
  }
  .middle {
    margin-top: 30px;
    height: 63px;
    span{
      margin-left: 15px;
      font-size: 15px;
      font-weight: 700;
    }
  }
}
</style>
